<template>
  <div class="">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <h2 style="font-weight: bold">基本信息</h2>
      </div>
      <div class="text item" style="display: flex">
        <div class="" style="width: 50%">
          <div>
            消息名称 <span style="margin-left: 20px">{{ listData.name }}</span>
          </div>
          <div class="m_top">
            消息类型 <span style="margin-left: 20px">运营活动</span>
          </div>
          <div class="m_top">
            消息ID <span style="margin-left: 20px">{{ listData.id }}</span>
          </div>
          <div class="m_top">
            发送状态
            <span style="margin-left: 20px">{{ listData.sendStatusDesc }}</span>
          </div>
          <div class="m_top">
            发送用户
            <span style="margin-left: 20px">{{ listData.sendUser }}</span>
            <el-button
              style="margin-left: 10px"
              type="success"
              @click="downExcel('student')"
              v-if="listData.sendUser == '指定EXCEL导入学员'"
              >下载excel</el-button
            >
            <el-button
              style="margin-left: 10px"
              type="success"
              @click="downExcel('counselor')"
              v-if="listData.sendUser == '导入顾问'"
              >下载excel</el-button
            >
          </div>
          <div class="m_top">
            创建时间
            <span style="margin-left: 20px">{{ listData.createdTime }}</span>
          </div>
          <div class="m_top">
            发送时间<span
              style="margin-left: 20px"
              v-if="
                listData.messageTemplateAlias == 'OPERATION_MESSAGE_TEMPLATE'
              "
              >{{ listData.sendTime }}</span
            >
            <span
              style="margin-left: 20px"
              v-if="
                listData.messageTemplateAlias ==
                  'PERIOD_OF_SERVICE_MESSAGE_TEMPLATE'
              "
              >{{ listData.runTime }}</span
            >
          </div>
        </div>
        <div style="width: 50%">
          <div v-for="(item, index) in listData.messageChannels" :key="index">
            <span v-if="item.type !== 'BOMB_SCREEN'" style="float: left">{{
              item.sendTypeDesc
            }}</span>
            <div style="margin-left: 80px">
              <div v-if="item.type == 'DINGTALK'">
                <div>
                  <span>标题:</span>
                  <div>{{ item.title || '暂无信息' }}</div>
                </div>
                <div style="margin-top: 10px;">
                  <span>内容:</span>
                  <div>
                    <mavon-editor
                      class="mavon"
                      v-if="item.content"
                      ref="md"
                      :toolbars="markdownOption"
                      v-model="item.content"
                      :subfield="false"
                      defaultOpen="preview"
                    />
                    <span v-else>'暂无信息'</span>
                  </div>
                </div>
                <div class="m_top">
                  <span>附件:</span>
                  <div>
                    <span
                      v-for="(annex, index) in listData.annexes"
                      :key="index"
                      class="m-left"
                    >
                      {{ annex.name
                      }}<span
                        @click="priview(annex)"
                        v-if="typeList.includes(getFileType(annex.url))"
                        class="preview"
                        >预览</span
                      >
                    </span>
                  </div>
                </div>
              </div>
              <span v-else> {{ item.content }} </span>
            </div>

            <span v-if="item.type === 'BOMB_SCREEN'" style="float: left">{{
              item.sendTypeDesc
            }}</span>
            <div v-if="item.type === 'BOMB_SCREEN'" style="margin-left: 80px">
              <div>展示端口：{{ item.bombScreenType }}</div>
              <div style="margin-top: 20px">
                <span>弹屏图片：</span>
                <el-image
                  style="width: 100px; height: 100px; vertical-align: text-top"
                  :src="item.bombScreenImage"
                ></el-image>
              </div>
              <div v-if="item.link">跳转链接：{{ item.link }}</div>
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <h2 style="font-weight: bold">发送数据</h2>
        <div
          class="box-card__div"
          v-for="(item, index) in listData.messageChannels"
          :key="index"
        >
          <el-button
            class="box-card__div__button"
            type="success"
            @click="downFileExcel"
            v-if="item.type == 'SMS'"
            >下载短信发送失败用户</el-button
          >
        </div>
      </div>
      <div class="text item">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            align="center"
            prop="sendTypeDesc"
            label="发送渠道"
            width="180"
          >
          </el-table-column>
          <el-table-column align="center" prop="totalNum" label="发送数量">
          </el-table-column>
          <el-table-column
            align="center"
            prop="successNum"
            label="发送成功数量"
          >
          </el-table-column>
          <el-table-column align="center" prop="readNum" label="查看数量">
          </el-table-column>
          <el-table-column
            align="center"
            prop="subsequentNum"
            label="后续操作数量"
          >
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <PreviewVideo
      :previewVideoParams="previewVideoParams"
      v-if="previewVideoParams.centerDialogVisible"
    />
    <el-image-viewer
      v-if="showViewer"
      :on-close="
        () => {
          showViewer = false
        }
      "
      :url-list="imgList"
    >
    </el-image-viewer>
  </div>
</template>

<script>
// 字典公共方法
import { sysNormalDisable } from '@utils/dictionariesFunc'
import { messageDetail, messagesDetailsNumber } from '@/api/notice'
import PreviewVideo from '@/components/messageManagement/template/previewVideo'

import { downFile } from '@utils/msgPublic'
export default {
  data() {
    return {
      typeList: ['image', 'video'],
      markdownOption: {},
      listData: {},
      tableData: [],
      dataStatus: [],
      showViewer: false,
      previewVideoParams: {
        centerDialogVisible: false
      }
    }
  },
  created() {},
  mounted() {
    this.getList()
    this.getDetails()
    this.getStatusList()
  },
  components: {
    PreviewVideo,
    'el-image-viewer': () =>
      import('element-ui/packages/image/src/image-viewer')
  },
  methods: {
    getFileType(fileName) {
      // 后缀获取
      let suffix = ''
      // 获取类型结果
      let result = ''
      try {
        const flieArr = fileName.split('.')
        suffix = flieArr[flieArr.length - 1]
      } catch (err) {
        suffix = ''
      }
      // fileName无后缀返回 false
      if (!suffix) {
        return false
      }
      suffix = suffix.toLocaleLowerCase()
      // 图片格式
      const imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif']
      // 进行图片匹配
      result = imglist.find((item) => item === suffix)
      if (result) {
        return 'image'
      }
      // 匹配txt
      const txtlist = ['txt']
      result = txtlist.find((item) => item === suffix)
      if (result) {
        return 'txt'
      }
      // 匹配 excel
      const excelist = ['xls', 'xlsx']
      result = excelist.find((item) => item === suffix)
      if (result) {
        return 'excel'
      }
      // 匹配 word
      const wordlist = ['doc', 'docx']
      result = wordlist.find((item) => item === suffix)
      if (result) {
        return 'word'
      }
      // 匹配 pdf
      const pdflist = ['pdf']
      result = pdflist.find((item) => item === suffix)
      if (result) {
        return 'pdf'
      }
      // 匹配 ppt
      const pptlist = ['ppt', 'pptx']
      result = pptlist.find((item) => item === suffix)
      if (result) {
        return 'ppt'
      }
      // 匹配 视频
      const videolist = [
        'mp4',
        'm2v',
        'mkv',
        'rmvb',
        'wmv',
        'avi',
        'flv',
        'mov',
        'm4v'
      ]
      result = videolist.find((item) => item === suffix)
      if (result) {
        return 'video'
      }
      // 匹配 音频
      const radiolist = ['mp3', 'wav', 'wmv']
      result = radiolist.find((item) => item === suffix)
      if (result) {
        return 'radio'
      }
      // 其他 文件类型
      return 'other'
    },
    priview(annex) {
      let fileType = this.getFileType(annex.url)
      if (fileType == 'image') {
        this.imgList = []
        this.showViewer = true
        this.imgList.push(annex.url)
      } else if (fileType == 'video') {
        this.previewVideoParams.centerDialogVisible = true
        this.previewVideoParams.url = annex.url
      }
    },
    // tableRowStyle(row, rowIndex) {
    //   return 'display:flex;justify-content:center;align-items:center;flex-direction:column'
    // },
    downExcel(userType) {
      userType === 'counselor'
        ? this.downCounselorExcel()
        : this.downStudentExcel()
    },
    downStudentExcel() {
      let id = this.listData.id
      let url = `/messages/tasks/${id}/details/ids/download`
      this.msgDown('get', url, '', '学员excel')
    },
    downCounselorExcel() {
      let taskId = this.listData.id
      let url = `/messages/activity/${taskId}/export-consultant`
      this.msgDown('get', url, '', '顾问工号excel')
    },
    async downFileExcel() {
      let id = this.listData.id
      let url = `/messages/${id}/export`
      this.msgDown('get', url, '', '失败数据excel')
    },
    // 从字典中取到用户类型和发送状态
    async getStatusList(val) {
      this.dataStatus = await sysNormalDisable('send_status', 'send_status')
    },
    // 列表
    getList() {
      let id = this.$route.query.id
      let params = {}
      messageDetail(
        id,
        params,
        (res) => {
          this.listData = res
        },
        (err) => {
          console.log('err===>', err)
        }
      )
    },
    getDetails() {
      let id = this.$route.query.id
      let params = { templateTypeEnum: 'OPERATION_TEMPLATE' }
      messagesDetailsNumber(
        id,
        params,
        (res) => {
          res.forEach((ele) => {
            if (ele.readNum === null) {
              ele.readNum = '-'
            }
            if (ele.subsequentNum === null) {
              ele.subsequentNum = '-'
            }
          })
          this.tableData = res
        },
        (err) => {
          console.log('err===>', err)
        }
      )
    }
  }
}
</script>

<style lang="less" scoped>
.mavon {
  width: 100%;
  min-height: 200px;
  overflow-y: scroll;
}
.flex {
  display: flex;
  justify-items: space-around;
  &.column {
    flex-direction: column;
  }
}
.markdown-body > :first-child {
  display: none;
}
.m-left {
  margin-left: 20px;
}
.preview {
  margin-left: 10px;
  color: #1dc8a4;
  cursor: pointer;
}
.font_20 {
  font-size: 20px;
}
.m_top {
  margin-top: 20px;
}
.box-card .box-card__div {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  &__button {
    padding-left: 10px;
    width: 200px;
  }
}
</style>
